<template>
  <div class="app-container">

    <div>总金额：
      <el-input
        v-model="totalPrice"
        placeholder="总金额"
        style="width:240px"
        :disabled="true"/>
    </div>
    <div><br/>出票序号：
      <el-input
        v-model="serialNum"
        placeholder="出票序号"
        style="width:240px"/>
    </div>
    <div><br/>时间：
      <el-date-picker
        v-model="startTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      -
      <el-date-picker
        v-model="endTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <label v-html="pass"/>
      <el-button type="primary" @click="getOrders(1)">搜索</el-button>
      <el-button type="primary">打印</el-button>
    </div>

    <div><br/>
      <hr style="background-color: lightgray;"/>
      <br/>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="K">Korsou</el-checkbox>
        <el-checkbox label="F">Flamingo</el-checkbox>
        <el-checkbox label="D">Diario</el-checkbox>
        <el-checkbox label="S">ST</el-checkbox>
      </el-checkbox-group>


      <!--      <el-row>-->
      <!--        <el-button type="primary" plain @click="setCurrentBelongTo('');getOrders(1);">所有</el-button>-->
      <!--        <el-button type="primary" plain @click="setCurrentBelongTo('K');getOrders(1);">Korsou</el-button>-->
      <!--        <el-button type="primary" plain @click="setCurrentBelongTo('F');getOrders(1);">Flamingo</el-button>-->
      <!--        <el-button type="primary" plain @click="setCurrentBelongTo('D');getOrders(1);">Diario</el-button>-->
      <!--        <el-button type="primary" plain @click="setCurrentBelongTo('S');getOrders(1);">ST</el-button>-->
      <!--        <label v-html="pass"/>当前地区(默认所有地区)：{{ currentBelongTo === '' ? '所有' : currentBelongTo }}-->
      <!--      </el-row>-->
    </div>
    <br/>

    <el-table
      border
      :header-cell-style="{'color':'#2E53E9','font-size':'1.2em','font-weight':'900','background':'#F0FFF0'}"
      :row-style="grayBg"
      :data="datas">
      <el-table-column
        prop="machine_number" sortable
        label="机号" min-width="9%"/>
      <el-table-column
        prop="bet_number" sortable
        label="号码" min-width="9%"/>
      <el-table-column
        prop="prizes" sortable
        label="加奖" min-width="9%">
        <template slot-scope="scope">{{ getPrizes(scope.row.bet_number) }}</template>
      </el-table-column>
      <el-table-column
        prop="bet_money" sortable
        label="金额" min-width="9%"/>
      <el-table-column
        prop="serial_number" sortable
        label="出票序号" min-width="17%"/>
      <el-table-column
        prop="created_at" min-width="17%" sortable
        label="下单时间"/>
      <el-table-column min-width="12%" sortable
                       label="开奖时间">
        <template slot-scope="scope">{{ getOpenAt(scope.row.created_at) }}</template>
      </el-table-column>
      <el-table-column
        prop="belong_to" sortable
        label="地区" min-width="10%"/>
      <el-table-column
        prop="deleted_at" sortable
        label="被删时间" min-width="17%"/>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="getOrders"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :page-count="pageCount">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import axios from "axios";
  import moment from "moment";
  import {mapGetters} from "vuex";
  import {getEndYMD, getStartYMD} from '@/util/DTUtil'
  import G from "@/components/G";


  export default {
    name: 'List',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        checkList: [],
        pass: "&emsp;",
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

        totalPrice: 0,//<=
        serialNum: '',//p
        startTime: getEndYMD(),//p
        endTime: getEndYMD(),//p
        currentBelongTo: '',//p
        currentPage: 1,//p-default
        pageSize: 50,//p-fixed
        datas: [],//<=
        pageCount: 0,//<=
        //按序号改变条目背景色
        tempSerial: '',
        tempColor: '#FFFFFF',//E0E0E0
        tempCount: 0,
        //定时器
        timer: null
      };
    },

    methods: {
      setCurrentBelongTo(belongTo) {
        this.currentBelongTo = belongTo;
      },

      checkTime(i) {
        if (i < 10) {
          i = "0" + i
        }
        return i;
      },

      getOrderAuto: function () {
        this.getOrders(1)
      },

      getOrders: function (page) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        let belongs = '';
        if (this.checkList.length > 0) {
          for (let i = 0; i < this.checkList.length; i++) {
            belongs = belongs + "," + this.checkList[i];
          }
        }
        if (belongs.startsWith(",")) {
          belongs = belongs.substring(1, belongs.length)
        }

        this.currentPage = page;
        let startDate = new Date(this.startTime);
        let requestStartTime = startDate.getFullYear() + '-' + this.checkTime(startDate.getMonth() + 1) + '-' + this.checkTime(startDate.getDate());
        let endDate = new Date(this.endTime);
        let requestEndTime = endDate.getFullYear() + '-' + this.checkTime(endDate.getMonth() + 1) + '-' + this.checkTime(endDate.getDate());
        requestStartTime = requestStartTime + " 00:00:00"
        requestEndTime = requestEndTime + " 23:59:59"
        let param = '&serial_number=' + this.serialNum
          + '&page=' + this.currentPage
          + '&pageSize=' + this.pageSize
          + '&startTime=' + requestStartTime
          + '&endTime=' + requestEndTime
          + '&belong_to=' + belongs;
        console.log('getOrders param:' + param);
        axios.post(G.host + 'getOrders', param).then(res => {
          this.totalPrice = res.data.totalPrice;
          this.pageCount = res.data.pageCount;
          this.datas = res.data.orderList;
          loading.close()
        })
      },
      getPrizes(number) {
        if (number.includes("P")) {
          return "POOL"
        } else {
          return ""
        }
      },
      getOpenAt(created_at) {
        if (created_at !== null && created_at.length >= 10) {
          return created_at.substring(0, 10);
        } else return '';
      },
      //置灰
      grayBg({row, rowIndex}) {
        if (row.color === 1) {
          return {
            background: '#FFFFFF'
          }
        } else {
          return {
            background: '#E0E0E0'
          }
        }
      }
    },
    mounted() {
      this.getOrders(1);
      //初始化当前日期
      this.startTime = getEndYMD()
      this.endTime = getEndYMD()
      //定时刷新
      this.timer = setInterval(this.getOrderAuto, 30000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    }
  }
</script>
